<template>
  <div>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="姓名">
          <el-input
            v-model="form.realName"
            clearable
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" clearable :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import crudUser from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
import "@wangeditor/editor/dist/css/style.css";
import { Loading } from "element-ui";
export default {
  name: "JiaRenReportDialog",
  components: {
    Editor,
    Toolbar
  },
  props: {
    title: {
      type: String,
      default: "新增"
    }
  },
  dicts: ["ROLE"],
  data() {
    const confirmPass = (rule, value, callback) => {
      if (value) {
        if (this.form.password !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请再次输入密码"));
      }
    };
    return {
      dialogVisible: false,
      isEdit: false, //是否编辑
      form: {
        id: "",
        name: "",
        phone: "",
        confirmPassword: "",
        password: ""
      },
      rules: {
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, validator: confirmPass, trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    uploadUrl() {
      return process.env.VUE_APP_BASE_API + "/public/file/upload";
    },
    headers() {
      return { Authorization: getToken() };
    }
  },

  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      this.$nextTick(() => {
        const toolbar = DomEditor.getToolbar(this.editor);
        this.curToolbarConfig = toolbar.getConfig();
      });
    },
    getOfficeLocation() {},
    handleInput(value) {
      this.$emit("change", value); // 将内容同步到父组件中
    },
    onChange(editor) {
      // 监听富文本输入
      const text = editor.getText().replace(/\n|\r/gm, "");
      this.textLength = text.length;
    },
    onMaxLength(editor) {
      // 当输入值达到限制值时触发事件
      this.$message.warning("输入文本数已到达最大值！");
    },

    submitHandle() {
      if (this.isEdit) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            const params = {
              phone: this.form.phone,
              password: this.form.password
            };
            crudUser
              .changePassword(params)
              .then(res => {
                this.dialogVisible = false;
                this.$notify({ message: "操作成功", type: "success" });
                this.$emit("submitSuccess");
              })
              .catch(() => {});
          } else {
            return false;
          }
        });
      }
    }
  }
};
</script>

<style lang="scss"></style>
